<template>
	<div class="swiper">
		<div id="carousel" @mouseover="stopAuto" @mouseout="autoPlay">
			<div class="carousel-box" :style="{width:allCount,'-webkit-transition':transitionConfig,'-webkit-transform':slateX}"
			 ref="carousel">
				<div class="carousel-item" :style="{'-webkit-transform':imgLateX}" v-if="loop">
					<img :src="imgList[imgList.length-1].img" />
				</div>
				<div class="carousel-item" v-for="(item,index)  in imgList" :style="{'-webkit-transform':getImgLateX(index)}">
					<img :src="item.img" />
				</div>
				<div class="carousel-item" :style="{'-webkit-transform':endImgLateX}" v-if="loop">
					<img :src="imgList[0].img" />
				</div>
			</div>
			<span class="carousel-left" @click="toLeft">&#8249;</span>
			<span class="carousel-right" @click="toRight">&#8250;</span>
			<div class="carousel-dots" v-if="dots">
				<button v-for="(item,index) in imgList.length" :key="index" :class="{active:index==dotsIndex}" @click="toDots(index)">{{item}}</button>
			</div>
		</div>
	</div>
</template>

<script>
	import modal from '../routeUrl.js';
	import USER_CACHE from '../cache.js';
	export default {
		data() {
			return {
				imgList: [{
					img: ''
				}],
				// 图片宽
				imgWidth: 750,
				// 指示器
				dots: true,
				arrow: true,
				// 初始播放位置
				initIndex: 0,
				// 是否循环
				loop: true,
				// 持续时间
				duration: 0.3,
				// 自动播放
				auto: true,
				// 自动播放时间间隔
				autoTime: 2000,
				imgIndex: 0,
				durationTime: 0.2,
				dotsIndex: 0,
				autoer: null,
			}
		},
		computed: {
			allCount() {
				//   console.log(this.imgList.length)
				//   console.log(this.imgWidth)
				// console.log((this.imgList.length*this.imgWidth)+'px')
				return (this.imgList.length * this.imgWidth) + 'px';
			},
			slateX() {
				// console.log('translate3d(' + (-this.imgIndex * this.imgWidth) + 'px,0,0)')
				return 'translate3d(' + (-this.imgIndex * this.imgWidth) + 'px,0,0)'
			},
			transitionConfig() {
				return 'all ' + this.durationTime + 's';
			},
			imgLateX() {
				let width = -this.imgWidth
				// console.log(width)
				return 'translate3d(' + (width) + 'px,0,0)'
			},
			//   getImgLateX(i){
			//         console.log(i)
			//     let width = this.imgWidth*i
			//     return 'translate3d('+(width)+'px,0,0)'
			//   },
			endImgLateX() {
				let width = this.imgList.length
				// console.log(width)
				return 'translate3d(' + (width) + 'px,0,0)'
			}
		},
		created() {
			this.imgIndex = this.dotsIndex = this.initIndex;

			this.durationTime = this.duration;

			if (this.auto) this.autoPlay();

			// let http = new HttpUtil()
			window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
			if (USER_CACHE.get('banner')) {
				if (USER_CACHE.get('banner').length > 0) {
					this.imgList = USER_CACHE.get('banner');
				} else {
					this.banner()
				}
			} else {
				this.banner()
			}

		},
		destroyed() {
			window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
		},
		methods: {
			banner() {
				modal.banner().then(res => {
					console.log(res)
					this.imgList = res.data;
					USER_CACHE.set('banner', res.data);
				})
			},
			beforeunloadFn(e) {
				console.log('刷新或关闭');
				USER_CACHE.removestorage('banner');

			},
			getImgLateX(i) {
				// console.log(i)
				let width = this.imgWidth * (i + 1)
				// console.log(width)
				return 'translate3d(' + (width) + 'px,0,0)'
			},
			toLeft() {
				if (this.loop) {
					this.imgIndex--;
					this.dotsIndex--;
					if (this.dotsIndex <= -1) this.dotsIndex = this.imgList.length - 1;

					if (this.imgIndex <= -2) this.loopFn('left');

				} else {
					if (this.imgIndex == 0) return this.dotsIndex = this.imgIndex = this.imgList.length - 1;
					this.imgIndex--;
					this.dotsIndex--;

				}

			},
			toRight() {
				if (this.loop) {
					// alert(this.loop)

					this.imgIndex++;
					this.dotsIndex++;
					if (this.dotsIndex == this.imgList.length) this.dotsIndex = 0;
					if (this.imgIndex == this.imgList.length + 1) this.loopFn('right');
				} else {
					this.imgIndex++;
					this.dotsIndex++;
					if (this.imgIndex > this.imgList.length - 1) return this.dotsIndex = this.imgIndex = 0;
				}
			},
			loopFn(type) {
				const dur = this.durationTime;
				this.durationTime = 0;

				this.imgIndex = type == 'right' ? 0 : this.imgList.length - 1;

				setTimeout(() => {
					this.$nextTick(function() {
						this.durationTime = dur;

						if (type == 'right') this.imgIndex++;
						else this.imgIndex--;
					})
				}, 30)
			},
			toDots(index) {
				this.dotsIndex = this.imgIndex = index;
			},
			autoPlay() {
				if (this.auto) {
					clearInterval(this.autoer);
					this.autoer = setInterval(() => {
						this.toRight();
					}, this.autoTime)
				}

			},
			stopAuto() {
				if (this.auto) return clearInterval(this.autoer);
			}
		},

	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	#carousel {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: px2vw(150);
		margin-left: auto;
		margin-right: auto;

	}

	.carousel-left,
	.carousel-right {
		position: absolute;
		top: 56%;
		display: inline-block;
		transform: translateY(-50%);
		color: #fff;
		border-radius: 50%;
		text-align: center;
		cursor: pointer;
		font-size: px2vw(30);
		border-radius: 50%;
		transition: all .5s;
	}

	.carousel-left {
		left: 0;
	}

	.carousel-right {
		right: 0;
	}

	.carousel-left:hover,
	.carousel-right:hover {
		color: black;
	}

	.carousel-dots {
		position: absolute;
		bottom: px2vw(10);
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
	}

	.carousel-dots button {
		width: px2vw(18);
		height: px2vw(18);
		background: rgba(127, 124, 124, 0.5);
		display: inline-block;
		margin: 0 5px;
		border-radius: 50%;
		color: #000;
		border: none;
		outline: none;
		transition: all .2s;
		cursor: pointer;
		font-size: px2vw(4);
	}

	.carousel-dots button:hover,
	.carousel-dots button.active {
		background: rgba(51, 122, 183, 0.8);
		color: #fff;
	}

	.carousel-item {
		width: px2vw(375);
		position: absolute;
		top: 0;
		left: 0;
		height: px2vw(150);
	}

	.carousel-item img {
		width: 100%;
		height: px2vw(150);
	}
</style>
